<template>
  <div style="padding:10px;">
    <v-table
      :is-loading="isLoading"
      is-vertical-resize
      :vertical-resize-offset="60"
      is-horizontal-resize
      style="width:100%"
      :multiple-sort="false"
      :min-height="350"
      even-bg-color="#f2f2f2"
      :title-rows="tableConfig.titleRows"
      :columns="tableConfig.columns"
      :table-data="tableConfig.tableData"
      row-hover-color="#eee"
      row-click-color="#edf7ff"
      @sort-change="sortChange"
      :paging-index="(pageIndex - 1) * pageSize"
    ></v-table>
    <div class="mt20 mb20 bold"></div>
    <v-pagination
      @page-change="pageChange"
      @page-size-change="pageSizeChange"
      :total="tableConfig.total"
      :page-size="pageSize"
      :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
    ></v-pagination>
  </div>
</template>

<style>
.title-cell-class-name-test1 {
  background-color: #2db7f5;
  color: #fff;
}
.title-cell-class-name-test2 {
  background-color: #f60;
  color: #fff;
}
</style>
<script>
var tableData = [
  {
    name: "赵伟1",
    height: "175",
    gender: "男",
    tel: "156*****1987",
    hobby: "钢琴、书法、唱歌",
    address: "上海市黄浦区金陵东路569号17楼"
  },
  {
    name: "李伟1",
    height: "175",
    gender: "男",
    tel: "182*****1538",
    hobby: "钢琴、书法、唱歌",
    address: "上海市奉贤区南桥镇立新路12号2楼"
  },
  {
    name: "孙伟1",
    height: "175",
    gender: "男",
    tel: "161*****0097",
    hobby: "钢琴、书法、唱歌",
    address: "上海市崇明县城桥镇八一路739号"
  },
  {
    name: "周伟1",
    height: "175",
    gender: "男",
    tel: "197*****1123",
    hobby: "钢琴、书法、唱歌",
    address: "上海市青浦区青浦镇章浜路24号"
  },
  {
    name: "吴伟1",
    height: "175",
    gender: "男",
    tel: "183*****6678",
    hobby: "钢琴、书法、唱歌",
    address: "上海市松江区乐都西路867-871号"
  },
  {
    name: "赵伟2",
    height: "175",
    gender: "男",
    tel: "156*****1987",
    hobby: "钢琴、书法、唱歌",
    address: "上海市黄浦区金陵东路569号17楼"
  },
  {
    name: "李伟2",
    height: "175",
    gender: "男",
    tel: "182*****1538",
    hobby: "钢琴、书法、唱歌",
    address: "上海市奉贤区南桥镇立新路12号2楼"
  },
  {
    name: "孙伟2",
    height: "175",
    gender: "男",
    tel: "161*****0097",
    hobby: "钢琴、书法、唱歌",
    address: "上海市崇明县城桥镇八一路739号"
  },
  {
    name: "周伟2",
    height: "175",
    gender: "男",
    tel: "197*****1123",
    hobby: "钢琴、书法、唱歌",
    address: "上海市青浦区青浦镇章浜路24号"
  },
  {
    name: "吴伟2",
    height: "175",
    gender: "男",
    tel: "183*****6678",
    hobby: "钢琴、书法、唱歌",
    address: "上海市松江区乐都西路867-871号"
  },
  {
    name: "赵伟3",
    height: "175",
    gender: "男",
    tel: "156*****1987",
    hobby: "钢琴、书法、唱歌",
    address: "上海市黄浦区金陵东路569号17楼"
  },
  {
    name: "李伟3",
    height: "175",
    gender: "男",
    tel: "182*****1538",
    hobby: "钢琴、书法、唱歌",
    address: "上海市奉贤区南桥镇立新路12号2楼"
  },
  {
    name: "孙伟3",
    height: "175",
    gender: "男",
    tel: "161*****0097",
    hobby: "钢琴、书法、唱歌",
    address: "上海市崇明县城桥镇八一路739号"
  },
  {
    name: "周伟3",
    height: "175",
    gender: "男",
    tel: "197*****1123",
    hobby: "钢琴、书法、唱歌",
    address: "上海市青浦区青浦镇章浜路24号"
  },
  {
    name: "吴伟3",
    height: "175",
    gender: "男",
    tel: "183*****6678",
    hobby: "钢琴、书法、唱歌",
    address: "上海市松江区乐都西路867-871号"
  },
  {
    name: "赵伟4",
    height: "175",
    gender: "男",
    tel: "156*****1987",
    hobby: "钢琴、书法、唱歌",
    address: "上海市黄浦区金陵东路569号17楼"
  },
  {
    name: "李伟4",
    height: "175",
    gender: "男",
    tel: "182*****1538",
    hobby: "钢琴、书法、唱歌",
    address: "上海市奉贤区南桥镇立新路12号2楼"
  },
  {
    name: "孙伟4",
    height: "175",
    gender: "男",
    tel: "161*****0097",
    hobby: "钢琴、书法、唱歌",
    address: "上海市崇明县城桥镇八一路739号"
  },
  {
    name: "周伟4",
    height: "175",
    gender: "男",
    tel: "197*****1123",
    hobby: "钢琴、书法、唱歌",
    address: "上海市青浦区青浦镇章浜路24号"
  },
  {
    name: "吴伟4",
    height: "175",
    gender: "男",
    tel: "183*****6678",
    hobby: "钢琴、书法、唱歌",
    address: "上海市松江区乐都西路867-871号"
  },
  {
    name: "赵伟5",
    height: "175",
    gender: "男",
    tel: "156*****1987",
    hobby: "钢琴、书法、唱歌",
    address: "上海市黄浦区金陵东路569号17楼"
  },
  {
    name: "李伟5",
    height: "175",
    gender: "男",
    tel: "182*****1538",
    hobby: "钢琴、书法、唱歌",
    address: "上海市奉贤区南桥镇立新路12号2楼"
  },
  {
    name: "孙伟5",
    height: "175",
    gender: "男",
    tel: "161*****0097",
    hobby: "钢琴、书法、唱歌",
    address: "上海市崇明县城桥镇八一路739号"
  },
  {
    name: "周伟5",
    height: "175",
    gender: "男",
    tel: "197*****1123",
    hobby: "钢琴、书法、唱歌",
    address: "上海市青浦区青浦镇章浜路24号"
  },
  {
    name: "吴伟5",
    height: "175",
    gender: "男",
    tel: "183*****6678",
    hobby: "钢琴、书法、唱歌",
    address: "上海市松江区乐都西路867-871号"
  }
];
export default {
  name: "vueEasyTable",
  data () {
    return {
      isLoading: true,
      pageIndex: 1,
      pageSize: 8,
      tableConfig: {
        multipleSort: false,
        tableData: [],
        total: tableData.length,
        columns: [
          {
            field: "custome",
            width: 50,
            titleAlign: "center",
            columnAlign: "center",
            formatter: function (rowData, index, pagingIndex) {
              var currentIndex = index + pagingIndex;
              return currentIndex < 3
                ? '<span style="color:red;font-weight: bold;">' +
                (currentIndex + 1) +
                "</span>"
                : currentIndex + 1;
            },
            isResize: true
          },
          { field: "name", width: 100, columnAlign: "center", isResize: true },
          {
            field: "height",
            width: 100,
            columnAlign: "center",
            isResize: true
          },
          {
            field: "gender",
            width: 90,
            columnAlign: "center",
            isFrozen: false,
            isResize: true
          },

          {
            field: "address",
            width: 280,
            columnAlign: "center",
            isResize: true
          },
          { field: "hobby", width: 180, columnAlign: "center", isResize: true }
        ],
        titleRows: [
          [
            { fields: ["custome"], title: "排序", titleAlign: "center" },
            { fields: ["name"], title: "姓名", titleAlign: "center" },
            {
              fields: ["height"],
              title: "身高",
              titleAlign: "center",
              orderBy: ""
            },
            { fields: ["gender"], title: "性别", titleAlign: "center" },
            { fields: ["address"], title: "住址", titleAlign: "center" },
            { fields: ["hobby"], title: "爱好", titleAlign: "center" }
          ]
        ]
      }
    };
  },
  methods: {
    getTableData () {
      this.isLoading = true;
      setTimeout(() => {
        this.isLoading = false;
        this.tableConfig.tableData = tableData.slice(
          (this.pageIndex - 1) * this.pageSize,
          this.pageIndex * this.pageSize
        );
      }, 1000);
    },
    pageChange (pageIndex) {
      this.pageIndex = pageIndex;
      this.getTableData();
      console.log(pageIndex);
    },
    pageSizeChange (pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    sortChange (params) {
      if (params.height.length > 0) {
        this.tableConfig.tableData.sort(function (a, b) {
          if (params.height === "asc") {
            return a.height - b.height;
          } else if (params.height === "desc") {
            return b.height - a.height;
          } else {
            return 0;
          }
        });
      }
    }
  },
  created () {
    this.getTableData();
  }
};
</script>
